<template>
  <transition name="el-zoom-in-center" v-if="visible">
    <div class="jsbos-preview-main">
      <div class="jsbos-common-page-header">
        <el-page-header @back="goBack" content="批阅" />
        <div class="options">
          <el-button type="primary" @click="dataFormSubmit()">
            保 存
          </el-button>
          <el-button @click="goBack"> 取 消 </el-button>
        </div>
      </div>

      <div class="content">
        <div class="left">
          <div
            class="tiBox"
            v-for="(item, idx) in dataForm.temsexamtaskresultList"
            :key="item.id"
          >
            <answers
              v-if="item.questionType == 'answers'"
              :item="item"
              :idx="idx + 1"
            ></answers>
            <blank
              v-if="item.questionType == 'blank'"
              :item="item"
              :idx="idx + 1"
            ></blank>
          </div>
        </div>
        <div class="right">
          <div class="exam">
            <h3>考试信息</h3>
            <div class="explain-row">
              <div class="l">考试名称</div>
              <div class="r">{{ dataForm.examId }}</div>
            </div>
            <div class="explain-row">
              <div class="l">考试来源</div>
              <div class="r">{{ dataForm.creatorUserId }}</div>
            </div>
            <div class="explain-row">
              <div class="l">批阅数</div>
              <div class="r">{{ dataForm.reviewStatus }}</div>
            </div>
            <div class="explain-row">
              <div class="l">批阅进度</div>
              <div class="r">{{ dataForm.reviewStatus }}</div>
            </div>
          </div>

          <div class="exam">
            <h3>答卷信息</h3>

            <div class="explain-row">
              <div class="l">学员姓名</div>
              <div class="r">{{ dataForm.lastModifyUserId }}</div>
            </div>
            <div class="explain-row">
              <div class="l">开考时间</div>
              <div class="r">{{ dataForm.creatorTime }}</div>
            </div>
            <div class="explain-row">
              <div class="l">结束时间</div>
              <div class="r">{{ dataForm.lastModifyTime }}</div>
            </div>
            <div class="explain-row">
              <div class="l">考试得分</div>
              <div class="r">{{ dataForm.myScore }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import request from "@/utils/request";
import answers from "./components/answers.vue";
import blank from "./components/blank.vue";
export default {
  name: "reviewIndex",
  data() {
    return {
      visible: false,
      dataForm: {},
      taskList: [],
      chooseId: 0,
      detailId: "",
    };
  },
  computed: {},
  components: {
    answers,
    blank,
  },
  created() {
    // this.initData();
  },
  methods: {
    init(arr, id) {
      if (id) {
        this.$nextTick(() => {
          request({
            url: "/api/exam/TemsExamTask/" + id,
            method: "get",
          }).then((res) => {
            //   this.dataInfo(res.data)
            //   this.loading = false
            this.dataForm = { ...res.data };
            console.log("res======>", res);
            this.visible = true;
          });
        });
        this.detailId = id;

        return;
      }

      if (arr.length != 0) {
        //   this.dataForm.id = id || 0;
        this.taskList = arr;
        this.$nextTick(() => {
          request({
            url: "/api/exam/TemsExamTask/" + arr[0].id,
            method: "get",
          }).then((res) => {
            //   this.dataInfo(res.data)
            //   this.loading = false
            this.dataForm = { ...res.data };
            console.log("res======>", res);
            this.visible = true;
          });
        });
      }

      //   this.listLoading = true;
      //   let _query = {
      //     ...this.listQuery,
      //     ...this.query,
      //     menuId: this.menuId
      //   };
      //   getReviewList(_query).then(res => {
      //     var _list = [];
      //     for (let i = 0; i < res.data.list.length; i++) {
      //       let _data = res.data.list[i];
      //       _list.push(_data);
      //     }
      //     this.list = _list;
      //     this.total = res.data.pagination.total;
      //     this.listLoading = false;
      //   });
    },
    goBack() {
      this.visible = false;
    },
    dataFormSubmit() {
      var id = "";
      if (this.detailId) {
        id = this.detailId;
      } else {
        id = this.taskList[this.chooseId].id;
      }

      console.log(" this.dataForm ", this.dataForm);
      request({
        url: "/api/exam/TemsExamTask/reviewSubmit/" + id,
        method: "PUT",
        data: this.dataForm,
      }).then((res) => {
        //   this.dataInfo(res.data)
        //   this.loading = false
        // this.dataForm = { ...res.data };

        // this.visible = true;
        this.$message({
          message: res.msg,
          type: "success",
          duration: 1000,
          onClose: () => {
            this.visible = false;
            // this.$emit('refresh', true)
          },
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  padding: 16px;
  .left {
    width: calc(100% - 350px);
    float: left;
    .exam {
      h3 {
        line-height: 40px;
        margin-top: 0;
        margin-bottom: 0.5em;
        color: rgba(0, 0, 0, 0.85);
        font-weight: 500;
      }
    }
  }

  .exam:nth-child(2) {
    border-top: 1px solid #f0f0f0;
    margin-top: 20px;
    padding-top: 20px;
  }
  .explain-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    font-size: 14px;
    line-height: 24px;
    margin-top: 4px;
    .l {
      color: #8c8c8c;
      min-width: 80px;
    }
    .r {
      color: #262626;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;

      min-height: 24px;
      word-wrap: break-word;
    }
  }
  .right {
    width: 330px;
    float: right;
  }
}
</style>
